<template>
  <el-main>
    <div class="banner">
      <div class="wrapper clearfix">
        <div class="celeInfo-left">
          <div class="avatar-shadow">
            <img class="avatar" :src="movie.img_url" />
            <div class="movie-ver"></div>
          </div>
        </div>
        <div class="celeInfo-right clearfix">
          <div class="movie-brief-container">
            <h1 class="name">{{ movie.chinese_name }}</h1>
            <div class="ename ellipsis">
              {{ movie.english_name }}
            </div>
            <ul>
              <li class="ellipsis">{{ movie.type }}</li>
              <li class="ellipsis">{{ movie.country }}/{{ movie.length }}</li>
              <li class="ellipsis">
                {{ formatterTime(movie.release_date) }}
              </li>
            </ul>
          </div>
          <div class="action-buyBtn">
            <div>
              <span class="info-num">{{ movie.rating }}</span>
              <el-rate v-model="rating" allow-half />
            </div>
            <el-button
              class="btn"
              :class="movie.state == 1 ? 'buy' : 'buy1'"
              :disabled="movie.state == 1 ? false : true"
              @click="buy()"
            >
              购 票
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </el-main>
  <el-main
    ><el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="介绍" name="first" class="labelsize"
        ><ul class="nav">
          <li>
            <el-icon><CollectionTag style="color: #ffc600" /></el-icon>剧情介绍
            <div class="content">
              <span>{{ movie.introduction }}</span>
            </div>
          </li>
          <li>
            <el-icon><CollectionTag style="color: #ffc600" /></el-icon>演职人员
            <div class="content">
              <span>导演：{{ movie.director }}</span>
            </div>
            <div class="content">
              <span>演员：{{ movie.actors }}</span>
            </div>
          </li>
          <li>
            <el-icon><CollectionTag style="color: #ffc600" /></el-icon>图集
            <div>
              <el-row :gutter="20">
                <el-col :span="5" v-for="o in pictureInfo" :key="o.id">
                  <el-card
                    shadow="hover"
                    class="box-card"
                    :body-style="{ padding: '0px' }"
                  >
                    <img :src="o.pictureurl"
                  /></el-card>
                </el-col>
              </el-row>
            </div>
          </li>
          <li>
            <el-row :gutter="20">
              <el-col :span="16"
                ><div class="grid-content ep-bg-purple" />
                <el-icon><CollectionTag style="color: #ffc600" /></el-icon
                >评论</el-col
              >
            </el-row>
            <div v-for="o in discuss" :key="o">
              <div class="common-layout">
                <el-container>
                  <el-aside width="100px" class="avatarimg"
                    ><el-avatar :src="o.avatar" :size="100"
                  /></el-aside>
                  <el-main>
                    <el-container>
                      <el-header style="margin-top: 20px">
                        <span>{{ o.name }}</span>
                        <div style="color: #999">{{ o.distime }}</div>
                      </el-header>
                      <el-main class="dcontent">{{ o.content }}</el-main>
                    </el-container>
                  </el-main>
                </el-container>
                <el-divider />
              </div>
            </div>
          </li></ul
      ></el-tab-pane>
      <el-tab-pane label="演职人员" name="second">
        <div class="content">
          <span>导演：{{ movie.director }}</span>
        </div>
        <div class="content">
          <span>演员：{{ movie.actors }}</span>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图集" name="fourth">
        <div>
          <el-row :gutter="20">
            <el-col :span="5" v-for="o in pictureInfo" :key="o.id">
              <el-card
                shadow="hover"
                class="box-card"
                :body-style="{ padding: '0px' }"
              >
                <img :src="o.pictureurl"
              /></el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="评论" name="five">
        <el-row :gutter="20">
          <el-col :span="16"
            ><div class="grid-content ep-bg-purple" />
            <el-icon><CollectionTag style="color: #ffc600" /></el-icon
            >评论</el-col
          >
          <el-col :span="8"
            ><div class="grid-content ep-bg-purple" />
            <el-button @click="EditPanle()" round>写短评</el-button></el-col
          >
        </el-row>
        <div v-for="o in discuss" :key="o.did">
          <div class="common-layout">
            <el-container>
              <el-aside width="100px" class="avatarimg"
                ><el-avatar :src="o.avatar" :size="100"
              /></el-aside>
              <el-main>
                <el-container>
                  <el-header style="margin-top: 20px">
                    <ul>
                      <li>{{ o.name }}</li>
                      <li style="color: #999">{{ o.distime }}</li>
                    </ul>
                  </el-header>
                  <el-main class="dcontent">{{ o.content }}</el-main>
                </el-container>
              </el-main>
            </el-container>
            <el-divider />
          </div>
        </div>
      </el-tab-pane> </el-tabs
  ></el-main>
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <div class="common-layout">
      <el-container>
        <div>添加评论</div>
        <el-header class="userpanel"
          ><el-avatar :src="userInfo.avatar" :size="100" />
          <span>{{ userInfo.name }}</span></el-header
        >
      </el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-input
              v-model="textarea"
              class="textconten"
              type="textarea"
              :rows="5"
          /></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="19"><div class="grid-content ep-bg-purple" /></el-col>
          <el-col :span="5" style="margin-top: 10px">
            <el-button
              type="primary"
              style="padding: 20px"
              size="large"
              :loading="loading"
              @click="submitdiscuss()"
              >{{ loading ? "提交中..." : "提交" }}</el-button
            ></el-col
          >
        </el-row>
      </el-main>
    </div>
  </el-drawer>
  <!-- <buyticket v-model="DialogVisible" v-if="isRouterAlive"/> -->
  <el-dialog v-model="DialogVisible" title="购票" width="60%" center>
    <el-steps :active="active" finish-status="success">
      <el-step title="电影信息"></el-step>
      <el-step title="座位选择"></el-step>
      <el-step title="完成购票"></el-step>
    </el-steps>
    <el-row>
      <el-form
        label-position="left"
        label-width="100px"
        style="width: 100%; margin-left: 50px"
      >
        <div v-show="active == 1">
          <div class="Tinfo">
            <img class="avatar" :src="movie.img_url" />
            <div class="imginfo">
              <h1>{{ movie.chinese_name }}</h1>
              <div class="ename ellipsis">
                {{ movie.english_name }}
              </div>
              <ul>
                <li class="ellipsis">{{ movie.type }}</li>
                <li class="ellipsis">{{ movie.country }}/{{ movie.length }}</li>
                <li class="ellipsis">
                  {{ formatterTime(movie.release_date) }}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div v-show="active == 2">
          <el-col :span="18">
            <div>
              <div class="seat">
                <div class="seat-example">
                  <div>
                    <img
                      class="zwimg"
                      src="../../assets/images/wx.png"
                      alt=""
                    />
                  </div>
                  <div class="selectable-example example">
                    <span>可选座位</span>
                  </div>
                </div>
                <div class="seat-example">
                  <div>
                    <img
                      class="zwimg"
                      src="../../assets/images/yx.png"
                      alt=""
                    />
                  </div>
                  <div class="selectable-example example">
                    <span>已选座位</span>
                  </div>
                </div>
                <div class="seat-example">
                  <div>
                    <img
                      class="zwimg"
                      src="../../assets/images/yd.png"
                      alt=""
                    />
                  </div>
                  <div class="selectable-example example">
                    <span>已预订座位</span>
                  </div>
                </div>
                <div class="seat-example">
                  <div>
                    <img
                      class="zwimg"
                      src="../../assets/images/ys.png"
                      alt=""
                    />
                  </div>
                  <div class="selectable-example example">
                    <span>已售座位</span>
                  </div>
                </div>
              </div>
              <div class="Cinamecenten">
                <div class="screen">银幕中央</div>
              </div>
              <div class="seats-wrapper">
                <div class="row" v-for="row in rc.row" :key="row">
                  <span
                    class="seattable"
                    v-for="col in rc.col"
                    :key="col"
                    @click="seat(row, col)"
                  >
                    <img
                      class="seatsize"
                      v-if="selected(row + '排' + col + '座').status == 0"
                      src="../../assets/images/wx.png"
                      alt=""
                    />
                    <img
                      class="seatsize"
                      v-else-if="selected(row + '排' + col + '座').status == 1"
                      src="../../assets/images/yx.png"
                      alt=""
                    />
                    <img
                      class="seatsize"
                      v-else-if="selected(row + '排' + col + '座').status == 2"
                      src="../../assets/images/yd.png"
                      alt=""
                    />
                    <img
                      class="seatsize"
                      v-else
                      src="../../assets/images/ys.png"
                      alt=""
                    />
                  </span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6" style="margin-left: 50px">
            <el-row>
              <el-col class="moinfo">影片名：{{ movie.chinese_name }} </el-col>
              <el-col class="moinfo">
                <el-select v-model="cname" clearable placeholder="影院">
                  <el-option
                    v-for="item in cinemalist"
                    :key="item"
                    :value="item.cname"
                    @click="cinemaclick(item.cid)"
                  />
                </el-select>
              </el-col>
              <el-col class="moinfo">
                <el-select v-model="room" placeholder="厅号：">
                  <el-option
                    v-for="item in roomlist"
                    :key="item"
                    :value="item.r_name"
                    @click="roomclick(item.id, item.row, item.col)"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col class="moinfo">
                <el-select v-model="session" clearable placeholder="时间段：">
                  <el-option
                    v-for="item in sessionlist"
                    :key="item"
                    :value="item.time"
                    @click="sessionclick(item.id)"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col class="moinfo"> 票价：{{ movie.price }} </el-col>
              <el-col class="moinfo">
                <div>座位号</div>
                <el-tag
                  v-for="tag in tagData"
                  :key="tag"
                  class="mx-1"
                  :disable-transitions="false"
                  size="large"
                >
                  {{ tag.seat }}
                </el-tag>
              </el-col>
            </el-row>
          </el-col>
        </div>

        <div v-show="active == 3">
          <el-descriptions title="订单信息">
            <el-descriptions-item label="影片名:">{{
              movie.chinese_name
            }}</el-descriptions-item>
            <el-descriptions-item label="用户名:">{{
              users.name
            }}</el-descriptions-item>
            <el-descriptions-item label="电话号码:">{{
              users.phone
            }}</el-descriptions-item>
            <el-descriptions-item label="影院:">{{
              cname
            }}</el-descriptions-item>
            <el-descriptions-item label="票价:">{{
              price
            }}</el-descriptions-item>
            <el-descriptions-item label="座位号:">{{
              seats
            }}</el-descriptions-item>
          </el-descriptions>
          <div class="btn_buy">
            <el-button type="danger" round @click="buyticket()">购买</el-button>
          </div>
        </div>
      </el-form>
    </el-row>

    <div class="btn_buy">
      <el-button style="padding: 10px" type="warning" @click="pre()"
        >上一步</el-button
      >
      <el-button style="padding: 10px" type="warning" @click="next()"
        >下一步</el-button
      >
    </div>
  </el-dialog>
</template>
<script lang="ts">
import {
  computed,
  onMounted,
  reactive,
  ref,
  inject,
  watch,
  provide,
  nextTick,
} from "vue";
import { FormInstance, ElMessage, ElMessageBox, ElLoading } from "element-plus";
import type { TabsPaneContext } from "element-plus";
import { CollectionTag } from "@element-plus/icons-vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { postSelectCinemaAPI } from "../../api/userinfo";
import { useStore } from "vuex";
import { SeatsParams, OrderaddParams } from "../../types/parmas";
import buyticket from "../../views/movie/Buyticket.vue";
export default {
  components: { CollectionTag, buyticket },
  setup() {
    onMounted(() => {
      cinema();
    });
    const isRouterAlive = ref(true);
    const reload = () => {
      isRouterAlive.value = false;
      nextTick(() => {
        isRouterAlive.value = true;
        console.log(1111);
      });
    };
    const loading = ref(false);
    const router = useRoute();
    const routers = useRouter();
    const store = useStore();
    const movie = computed(() => {
      return store.state.movie.movieInfo;
    });
    const initrating = computed(() => {
      return store.state.movie.movieInfo.rating * 1;
    });
    const discuss = computed(() => {
      return store.state.discuss.discussInfo;
    });
    const userInfo = computed(() => {
      return store.state.user.userInfo;
    });
    const pictureInfo = computed(() => {
      return store.state.picture.pictureInfo;
    });
    const rating = ref(initrating);
    const activeName = ref("first");
    const DialogVisible = ref(false);
    const screenlist = ref([]);
    const cname = ref("");
    const cinemalist = ref([]);
    const seats = ref("");
    const session = ref("");
    const selectData = ref([]);
    const tagData = ref([]);
    const isAlive = ref(true);
    const drawer = ref(false);
    const textarea = ref("");
    const sessionlist = computed(() => {
      return store.state.arrange.arrangeTime;
    });
    const room = ref("");
    const roomlist = computed(() => {
      return store.state.room.roomInfo;
    });
    const cinema = async () => {
      await postSelectCinemaAPI().then((res) => {
        res.data.forEach((Element: never) => {
          cinemalist.value.push(Element);
        });
      });
    };
    const users = reactive({
      name: "",
      phone: "",
    });
    const formatterTime = (value: string | number | Date) => {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = (date.getMonth() + 1) as number;
      MM = MM < 10 ? (("0" + MM) as unknown as number) : MM;
      let d = date.getDate();
      d = d < 10 ? (("0" + d) as unknown as number) : d;
      let h = date.getHours();
      h = h < 10 ? (("0" + h) as unknown as number) : h;
      let m = date.getMinutes();
      m = m < 10 ? (("0" + m) as unknown as number) : m;
      let s = date.getSeconds();
      s = s < 10 ? (("0" + s) as unknown as number) : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    };
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      switch (tab.index) {
        case "4":
          store.dispatch("SET_DISCUSSINFO", movie.value.mid);
          break;
      }
    };
    const seatInfo = ref([]);
    const buy = () => {
      if (sessionStorage.getItem("token") == null || "") {
        ElMessageBox.confirm("您还未登录，是否先去登录？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          routers.push({ name: "login" });
        });
      } else {
        DialogVisible.value = true;
        store.dispatch("SET_ALLSEAT").then(() => {
          selectData.value = computed({
            get: () => {
              return store.state.seat.allseatInfo;
            },
            set: (newValue) => {
              selectData.value = newValue;
            },
          }) as never;
        });
      }
    };
    let active = ref(1);
    const next = () => {
      active.value++;
      if (active.value > 3) {
        active.value = 0;
      } else if (active.value == 2) {
        // store.dispatch("SET_SESSION");
        store.dispatch("SET_ROOM");
      } else if (active.value == 3) {
        users.name = store.state.user.userInfo.name;
        users.phone = store.state.user.userInfo.userphone;
        price.value = Number(movie.value.price) * tagData.value.length;
        tagData.value.forEach((el: any) => {
          seats.value += el.seat + ",";
        });
        seats.value = seats.value.substring(0, seats.value.lastIndexOf(","));
      }
    };
    const pre = () => {
      seats.value = "";
      if (active.value-- < 1) active.value = 0;
    };
    // 监听数组
    watch(
      selectData,
      () => {
        console.log("监听后的值：", selectData.value);
        reload();
        // console.log('监听后的值：', store.state.seat.allseatInfo)
        store.state.seat.allseatInfo = selectData.value;
      },
      {
        deep: true, // 只有当deep为true时才能监听到数组的改变
      }
    );
    let price = ref(0);
    const aaa = ref([]);
    //某个座位被点击触发
    const seat = (row: any, col: any) => {
      if (roomid.value != 0) {
        //临时封装的座位信息
        let datas = {
          mid: movie.value.mid,
          session_id: sessionid.value,
          room_id: roomid.value,
          cinema_id: cid.value,
          seat: row + "排" + col + "座",
          flag: 1,
          uid: store.state.user.userInfo.uid,
        };
        store.dispatch("SET_SEATONE", datas).then((res) => {
          if (res) {
            ElMessage.warning("该位置已被选择");
            datas.flag = 2;
            selectData.value.push(datas as never);
          } else {
            switch (selected(row + "排" + col + "座").status) {
              case 0:
                tagData.value.push(datas as never);
                selectData.value.push(datas as never);
                break;
              case 1:
                selectData.value = selectData.value.filter((el: any) => {
                  return el.seat != row + "排" + col + "座";
                });
                tagData.value = tagData.value.filter((element: any) => {
                  return element.seat != row + "排" + col + "座";
                });
                break;
              default:
                ElMessage.warning("该位置已被预定或出售");
            }
          }
        });
      } else {
        ElMessage.warning("请选择厅号!!");
      }
    };
    //过滤
    const selected = (num: any) => {
      let filterData = {
        id: 0,
        status: 0,
      };
      Array.from(selectData.value).forEach((item: any) => {
        if (
          item.seat.indexOf(num) != -1 &&
          item.room_id == roomid.value &&
          item.mid == movie.value.mid &&
          item.session_id == sessionid.value &&
          item.cinema_id == cid.value
        ) {
          filterData.status = item.flag;
        }
        filterData.id = item.room_id;
      });
      return filterData;
    };
    let cid = ref(0);
    const cinemaclick = (id: any) => {
      cid.value = id;
    };
    let sessionid = ref(0);
    const sessionclick = (id: any) => {
      sessionid.value = id;
      let seat = reactive({
        mid: movie.value.mid,
        rid: roomid.value,
        sid: sessionid.value,
        cid: cid.value,
      });
      store.dispatch("SET_SEATINFO", seat).then((data) => {
        selectData.value = data;
        console.log(data);
      });
    };
    let roomid = ref(0);
    const rc = ref({
      row: 5,
      col: 5,
    });
    const roomclick = (id: any, r: any, c: any) => {
      roomid.value = id;
      rc.value.row = computed(() => {
        return r;
      }) as any;
      rc.value.col = computed(() => {
        return c;
      }) as any;
      store.dispatch("SET_ARRANGETIME", {
        mid: movie.value.mid,
        cid: cid.value,
        rid: roomid.value,
      });
    };
    const buyticket = () => {
      let addseatInfo: SeatsParams = reactive({
        mid: movie.value.mid,
        room_id: roomid.value,
        session_id: sessionid.value,
        cinema_id: cid.value,
        seat: "",
        flag: 2,
        uid: store.state.user.userInfo.uid,
      });
      if (tagData.value.length > 0) {
        tagData.value.forEach((element: any) => {
          setTimeout(() => {
            addseatInfo.seat = element.seat;
            store.dispatch("SET_ADDSEAT", addseatInfo).then((id) => {
              let addorderInfo: OrderaddParams = reactive({
                sid: id,
                uid: store.state.user.userInfo.uid,
                state: 2,
              });
              store.dispatch("SET_ADDORDER", addorderInfo).then((flag) => {
                if (flag) {
                  ElMessage.success("订单创建成功");
                  DialogVisible.value = false;
                }
              });
            });
          }, 2000);
        });
      }
    };
    const EditPanle = () => {
      if (sessionStorage.getItem("token") == null || "") {
        ElMessageBox.confirm("您还未登录，是否先去登录？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          routers.push({ name: "login" });
        });
      } else {
        drawer.value = true;
      }
    };
    const openFullScreen = () => {
      loading.value = true;
      setTimeout(() => {
        loading.value = false;
      }, 2000);
    };
    const submitdiscuss = () => {
      openFullScreen();
      formatterTime(new Date());
      let discuss = reactive({
        uid: userInfo.value.uid,
        mid: movie.value.mid,
        content: textarea.value,
        distime: formatterTime(new Date()),
      });
      store.dispatch("SET_ADDDISCUSS", discuss);
      drawer.value = false;
      console.log(movie.value.mid);
      // store.dispatch("SET_DISCUSSINFO",movie.value.mid)
    };
    return {
      userInfo,
      isAlive,
      rc,
      roomclick,
      room,
      roomlist,
      session,
      sessionlist,
      selectData,
      activeName,
      router,
      formatterTime,
      next,
      pre,
      active,
      buy,
      DialogVisible,
      seat,
      selected,
      tagData,
      movie,
      screenlist,
      cinemalist,
      cname,
      users,
      seats,
      price,
      handleClick,
      cinemaclick,
      sessionclick,
      buyticket,
      rating,
      loading,
      discuss,
      EditPanle,
      drawer,
      textarea,
      submitdiscuss,
      pictureInfo,
      isRouterAlive,
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.el-main {
  overflow: hidden;
}
.banner {
  width: 100%;
  min-width: 1200px;
  background: #392f59
    url(https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/banner_bg.f7fd103e3b8c16b6f449cce43fc57f45.png)
    no-repeat 50%;
  margin-bottom: 50px;
}
.wrapper {
  width: 1200px;
  margin: 0 auto;
  height: 376px;
  position: relative;
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.celeInfo-left {
  width: 300px;
  float: left;
  position: relative;
  top: 70px;
  overflow: hidden;
  z-index: 9;
}
.avatar-shadow {
  position: relative;
  margin: 0 30px;
  width: 240px;
  height: 330px;
  padding-bottom: 40px;
  background: url()
    no-repeat bottom;
}
.avatar {
  border: 4px solid #fff;
  height: 322px;
  width: 232px;
}
.movie-ver {
  position: absolute;
  top: 4px;
  left: -2px;
  font-size: 12px;
  color: #fff;
}
.celeInfo-right {
  position: relative;
  margin-right: 30px;
  margin-left: 300px;
  margin-top: 70px;
}
.movie-brief-container {
  position: absolute;
  color: #fff;
  font-size: 14px;
  z-index: 1;
}
.name {
  width: 900px;
  margin-top: 0;
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 64px;
  color: #fff;
}
.ename {
  width: 340px;
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 14px;
}
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 20px;
}
.movie-brief-container ul {
  width: 250px;
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.action-buyBtn {
  position: absolute;
  bottom: 0;
}
.buy {
  margin-top: 20px;
  width: 250px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  padding: 0;
  background-color: #df2d2d;
}
.buy1 {
  margin-top: 20px;
  width: 250px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  padding: 0;
  background-color: #aeadad;
}
.btn {
  display: inline-block;
  padding: 2px 15px;
  line-height: 25px;
  font-size: 15px;
  color: #fff;
}
.index-right {
  margin-left: 54px;
  font-size: 12px;
}
.info-num {
  font-size: 30px;
  color: #ffc600;
  height: 30px;
  line-height: 30px;
}
.el-rate {
  padding: 20px;
}
.aa {
  margin: 10px 100px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #ed6a24;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs {
  margin: 10px 100px;
}

.el-tabs__item {
  font-size: 18px !important;
}
.nav li {
  font-size: 18px;
  margin-bottom: 60px;
}
.content {
  margin-top: 20px;
  margin-left: 40px;
}
.Tinfo {
  display: flex;
  padding: 30px;
}
.imginfo {
  margin: 20px;
}
.btn_buy {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.zwimg {
  height: 30px;
  line-height: 30px;
  margin-left: 13px;
}
.seat {
  display: flex;
  padding: 20px;
  justify-content: center;
}
.seat-example {
  margin-left: 30px;
}
.screen {
  width: 500px;
  padding-top: 50px;
  text-align: center;
  font-size: 16px;
  color: #666;
  background: url()
    no-repeat;
  background-position-x: center;
  position: relative;
  margin-bottom: 40px;
}
.row {
  width: 500px;
  display: flex;
  justify-content: center;
}
.seattable {
  display: inline-block;
  font-size: 0;
  width: 30px;
  height: 26px;
  margin: 0 5px;
  background-position: 0 1px;
}
.seatsize {
  width: 30px;
  height: 26px;
}
.seatbanner {
  display: flex;
}
.ticketinfo {
  border: 1px solid salmon;
  display: flex;
  width: 200px;
}
.seattag {
  padding: 20px;
}
.el-tag--large {
  display: inline-flex;
  width: 80px;
  margin: 5px 10px;
}
.moinfo {
  margin: 10px;
  font-size: 16px;
}
.avatarimg {
  margin-right: 20px;
}
.dcontent {
  width: 600px;
  word-wrap: break-word;
  word-break: break-all;
  text-indent: 2em;
  color: #666;
  margin-bottom: 30px;
}
.userpanel {
  width: 100px;
  height: 120px;
  margin-bottom: 30px;
}
.textconten {
  word-wrap: break-word;
  word-break: break-all;
  text-indent: 2em;
  color: #666;
}
.box-card {
  width: 280px;
  height: 150px;
  padding: 0;
  margin-top: 20px;
  overflow: hidden;
}
.box-card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.el-card:hover {
  box-shadow: -10px 0 10px rgb(0, 0, 0, 0.5);
}
</style>